{include file="common/head"/}
<style>
  .aui-bar-nav{background:white;}
  .aui-bar-nav .aui-btn .aui-iconfont{color:black;}
  body{background:#ffffff;}
  .aui-bar-nav .aui-title{color:black;}
  h1{font-weight:600;font-size:2rem;color:#17204d}
  .title{background:#4871FC; height:5rem;border-radius:10px;padding:10px;color:white;}
  .mark{background:#344DA7; height:100%;border-radius:10px;text-align:center;font-size:2rem;padding-top:0.5rem !important;}
  
  .title p{color:white;}
  .aui-tab{border-radius:7px;overflow:hidden;}
  .aui-tab-item.aui-active{background:#7e7e7e;color:white;border:0;}
  .aui-tab-item{background:#aeaeae;color:white;border-right:2px solid white;height:1.8rem;line-height:1.8rem;}
  .aui-list-item-left{width:50%;}
  .items img{display:inline;width:1rem;vertical-align:middle;}
  #card img{width:1.2rem;height:1.2rem;display:inline;}
  #card .aui-row{padding:20px 0;border-bottom:1px solid #efefef;}
  .aui-list-item-title{color:#9fa6c1 !important;}
</style>
<title>支付</title>
<body>
   <header class="aui-bar aui-bar-nav">
    <a class="aui-pull-left aui-btn aui-btn-outlined" href='javascript:history.go(-1);'>
        <span class="aui-iconfont aui-icon-left"></span>
    </a>
    <div class="aui-title"></div>
    <a class="aui-pull-right aui-btn aui-btn-outlined"  href='index.html'>
        <span class="aui-iconfont aui-icon-home"></span>
    </a>
  </header>
<div class='aui-content aui-content-padded'>

  <div class='aui-row-padded items' align=center>
      <h2>{$amount} CNY</h2>
      <h4>{$real_amount|fmt_char}整</h4>
      <h4><img src='__HOME__/images/clock.png'/> <font color=red>未付款</font>剩<span id='minute'>15</span>分<span id='second'>30</span>秒</h4>
  </div>
</div>

<div style='margin:1rem;background:#f8f9fd;padding:0 1rem;' id='card'>
    <div class='aui-row'>
		<img src='__HOME__/images/bcard1.png' align='absmiddle' /> {$pay_type|fmt_type}
	</div>
	<ul class="aui-list" style='background:transparent;'>
		<li>
			<div class="aui-list-item-inner">
				<div class="aui-list-item-title">收款人</div>
				<div class="aui-list-item-right">
					<div style="position:relative;top:0; left:0">{$shop.alipay_username}</div>
				</div>
			</div>
		</li>
		
		{if condition='$pay_type eq 0'}
		<li>
			<div class="aui-list-item-inner">
				<div class="aui-list-item-title">收款帐号</div>
				<div class="aui-list-item-right">
					<div style="position:relative;top:0; left:0">{$shop.alipay_account}</div>
				</div>
			</div>
		</li>
		<li>
			<div class="aui-list-item-inner">
				<div class="aui-list-item-title">收款码</div>
				<div class="aui-list-item-right">
					<div style="position:relative;top:0; left:0">
					   <a href='javascript:show_qrcode("/public/{$shop.pic}")'><img src='__HOME__/images/qrcode.png' /></a>
					</div>
				</div>
			</div>
		</li>
		<li>
			<div class="aui-list-item-inner">
				<div class="aui-list-item-title">付款参考号</div>
				<div class="aui-list-item-right">
					<div style="position:relative;top:0; left:0">{$code}<a href='javascript:alert("已复制!")'> <img src='__HOME__/img/copy.png' class='btn' style='display:inline;vertical-align:middle;' data-clipboard-text="{$code}" /></a></div>
				</div>
			</div>
		</li>
		{else/}
		  {if condition='$pay_type eq 2'}
		     <li>
				<div class="aui-list-item-inner">
					<div class="aui-list-item-title">微信号</div>
					<div class="aui-list-item-right">
						<div style="position:relative;top:0; left:0">{$shop.wechat_account}</div>
					</div>
				</div>
			</li>
			<li>
				<div class="aui-list-item-inner">
					<div class="aui-list-item-title">收款码</div>
					<div class="aui-list-item-right">
						<div style="position:relative;top:0; left:0">
						   <a href='javascript:show_qrcode("/public/{$shop.wechat_qrcode}")'><img src='__HOME__/images/qrcode.png' /></a>
						</div>
					</div>
				</div>
			</li>
			<li>
				<div class="aui-list-item-inner">
					<div class="aui-list-item-title">付款参考号</div>
					<div class="aui-list-item-right">
						<div style="position:relative;top:0; left:0">{$code}<a href='javascript:alert("已复制!")'> <img src='__HOME__/img/copy.png' class='btn' style='display:inline;vertical-align:middle;' data-clipboard-text="{$code}" /></a></div>
					</div>
				</div>
			</li>
		  {/if}
		  
		  {if condition='$pay_type eq 3'}
		     <li>
				<div class="aui-list-item-inner">
					<div class="aui-list-item-title">ETH当前价值</div>
					
				</div>
				<div style='font-size:1rem;color:orange;'>
				￥{$amount} ≈ {$val} eth 
				</div>
			</li>
			<li>
				<div class="aui-list-item-inner">
					<div class="aui-list-item-title">ETH地址</div>
				</div>
				<div>
				<input type='text' value='{$shop.eth}' style='font-size:12px;display:inline;width:90%;'>
				<a href='javascript:alert("已复制!")'> <img src='__HOME__/img/copy.png' class='btn' style='display:inline;vertical-align:middle;' data-clipboard-text="{$shop.eth}" /></a>
				</div>
			</li>
			<li>
				<div class="aui-list-item-inner">
					<div class="aui-list-item-title">付款参考号</div>
					<div class="aui-list-item-right">
						<div style="position:relative;top:0; left:0">{$code}<a href='javascript:alert("已复制!")'> <img src='__HOME__/img/copy.png' class='btn' style='display:inline;vertical-align:middle;' data-clipboard-text="{$code}" /></a></div>
					</div>
				</div>
			</li>
		  {/if}
		
		   {if condition='$pay_type eq 1'}
		      <li>
			<div class="aui-list-item-inner">
				<div class="aui-list-item-title">所属银行</div>
				<div class="aui-list-item-right">
					<div style="position:relative;top:0; left:0">{$shop.bank_name}</div>
				</div>
			</div>
		</li>
		<li>
			<div class="aui-list-item-inner">
				<div class="aui-list-item-title">银行地址</div>
				<div class="aui-list-item-right">
					<div style="position:relative;top:0; left:0">
					   {$shop.bank_address}
					</div>
				</div>
			</div>
		</li>
        <li>
			<div class="aui-list-item-inner">
				<div class="aui-list-item-title">收款码</div>
				<div class="aui-list-item-right">
					<div style="position:relative;top:0; left:0">
					   <a href='javascript:show_qrcode("/public/{$shop.bank_qrcode}")'><img src='__HOME__/images/qrcode.png' /></a>
					</div>
				</div>
			</div>
		</li>
		<li>
			<div class="aui-list-item-inner">
				<div class="aui-list-item-title">银行卡号</div>
				<div class="aui-list-item-right">
					<div style="position:relative;top:0; left:0">{$shop.bank_no}</div>
				</div>
			</div>
		</li>
		
		<li>
				<div class="aui-list-item-inner">
					<div class="aui-list-item-title">付款参考号</div>
					<div class="aui-list-item-right">
						<div style="position:relative;top:0; left:0">{$code}<a href='javascript:alert("已复制!")'> <img src='__HOME__/img/copy.png' class='btn' style='display:inline;vertical-align:middle;' data-clipboard-text="{$code}" /></a></div>
					</div>
				</div>
			</li>
		   {/if}
		{/if}
		
		<li>
			<div class="aui-list-item-inner">
				<div class="aui-list-item-title">请在<span id='minute1'>30</span>分<span id='second1'>00</span>秒内向以上收款方式支付</div>
			</div>
		</li>
	</ul>
</div>

<div style='width:80%;margin:auto;font-size:0.6rem;color:gray;'><label onclick='can_post()'><input class="aui-radio" type="radio" name="demo1" style='width:1rem;height:1rem;' > 我已知晓：需在付款成功后点击下方按钮。（恶意卡单将会被冻结帐号。）</label></div>
<div class="aui-btn aui-btn-default aui-btn-block aui-btn-sm" id='post_btn' style='width:80%;margin:auto;margin-top:10px;color:gray;text-shadow: 1px 1px white;'>已完成支付</div>
{include file="common/footer"/}
<script src='__HOME__/js/clipboard.min.js'></script>
<script type="text/javascript">
    var dialog = new auiDialog({})
	 new ClipboardJS('.btn');
	function can_post(){
	    if($(".aui-radio").prop('checked')){
		    $("#post_btn").removeClass('aui-btn-default');
		    $("#post_btn").addClass('aui-btn-info');
			$("#post_btn").bind('click', function(){
			    $.post("{:url('comfirm_pay')}", {"shop_id":{$shop.id}, 'code':{$code}, 'count':{$count}, 'pay_type':{$pay_type}}, function(data){
				    if(data == 1){
						dialog.alert({
							title:'提示',
							msg:'提交成功，等待审核通过!',
							buttons:['确定']
						}, function(){
							location.href = '/';
						});
					}else{
					   dialog.alert({
							title:'提示',
							msg:'提交失败，请稍后重试!',
							buttons:['确定']
						}, function(){
							location.href = '/home/fos/subscrible';
						});
					}
				})
			})
		}else{
		    $("#post_btn").removeClass('aui-btn-info');
		    $("#post_btn").addClass('aui-btn-default');
			$("#post_btn").unbind('click');
		}
	}
	
	function show_qrcode(url){
	    dialog.alert({
			title:"付款二维码",
			msg:"<div align=center><img src='"+url+"' width='60%' /></div>",
			buttons:['确定']
		});
	}

    var tab = new auiTab({
        element:document.getElementById("tab"),
        index:1,
        repeatClick:false
    },function(ret){
        var index = ret.index
		$("#m_list ul").hide();
		$("#m_list ul").eq(index-1).show();
    });
	
	var minute = "14";
    var second = 59;
    setInterval(function() {
        second--;
        if(second == 00 && minute == 00) {
            minute = 14;
            second = 59;
        };
        if(second == 00) {
            second = 59;
            minute--;
            if(minute < 10) minute = "0" + minute;
        };
        if(second < 10) second = "0" + second;
        $("#minute").text(minute);
        $("#minute1").text(minute);
        $("#second").text(second);
        $("#second1").text(second);
    }, 1000);
	
</script>
</body>
</html>